<template>
	<view class="container">
		<view class="header">
			<c-navBar title="可用积分" isPerch isTran style="width:100%;height:60rpx;"></c-navBar>
			<image src="../static/cow.png" style="
				position: absolute;
				width: 300rpx;
				height: 300rpx;
				right: 0;
				top: 129px;
				z-index: 0;
				opacity: 50%;" />
			<view class="header-top">
				<p><span style="font-size: 16px;font-weight: bold">可提现积分 </span>&nbsp; | 100积分可兑换1元</p>
				<view class="points">{{ statistics.treatWithdrawn }}
					<view class="header-tag">
						<p @click="goWithdrawal">去提现</p>
					</view>
				</view>
			</view>

			<view class="header-bottom">
				<view style="width: 50%">
					<view style="font-size: 26px;">{{ statistics.totalIntegral }}</view>
					<view>总积分</view>
				</view>
				<view style="width:1rpx;height:80%;background:#4ca7ff;"></view>
				<view style="width: 50%">
					<view style="font-size: 26px;">{{ statistics.freeze }}</view>
					<view>冻结积分</view>
				</view>
			</view>
		</view>
		<view class="details-header">
			<h2 :style="{color: pageType===0?'black':'gray'}" @click="changePage(0)">提现明细</h2>
			<h2 :style="{color: pageType===1?'black':'gray'}" @click="changePage(1)">成员列表</h2>
		</view>
		<view v-if="pageType===0" class="details">
			<scroll-view style="height: 920rpx;" scroll-y="true" enhanced :show-scrollbar="false" @scrolltolower="getPageData">
				<view v-for="(item, index) in integralList" :key="index" class="detail-item">
					<view style="width: 450rpx;">
						<p class="detail-name">{{ item.title }}<span v-if="item.withdrawalStatus===3">（{{item.remarks}})</span></p>
						<p class="detail-date">{{ item.updateTime }}</p>
					</view>
					<p class="detail-points">
						<view class="tag">{{ statusDic[item.withdrawalStatus] }}</view>
						{{ item.type===1?'':'-' }}{{ item.rattan }}
					</p>
				</view>
			</scroll-view>
			<!-- <c-scroll-list ref="list" :api="teamIntegralList" :apiParams="page" @load="load">
			</c-scroll-list> -->
		</view>
		<view v-else class="details">
			<view>
				<scroll-view style="height: 920rpx;" scroll-y="true">
					<view v-for="(item, index) in memberList" :key="index" class="detail-item"
						@click="shareToggle(item.contributor)">
						<view style="display:flex;">
							<image style="width: 60rpx; height: 60rpx; border-radius: 50%" :src="item.avatar" />
							<view style="margin-left: 20rpx;">
								<p class="detail-name">{{ item.name }}<span class="tag"
										style="margin-left:10rpx;background:blue;"
										v-if="item.promoterStatus === 1">推广员</span></p>
								<p class="detail-date">{{ item.createTime }}</p>
							</view>
						</view>
						<view>
							{{ item.totalProceeds }}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<view>
			<uni-popup ref="popupRef" background-color="#fff" type="bottom" borderRadius="10px 10px 10px 10px">
				<view class="popup-container" style="height: 40vh; ">
					<view class="popup-header">
						<text class="text">用户昵称-收益明细</text>
						<view class="popup-header-close" @click="closePopup"><uni-icons type="closeempty" size="15"></uni-icons></view>
					</view>
					<view class="view_fengexian">
					</view>
					<c-scroll-list ref="list" :api="api" :apiParams="apiParams" @load="load">
						<view class="rattan_record" v-for="(item, i) in flowIncomeList" :key="i">
							<view class="rattan_l">
								<p>{{ item.title }}</p>
								<span>{{ item.createTime ? item.createTime : "" }}</span>
							</view>
							<view class="rattan_r1" :style="item.type == 1 ? '' : 'color: #333333'">
								<!-- 0, 退款状态 0-未退款 e45cf4 1-退款中 e6a23c 2-退款成功 67c23a 3-退款失败 f56c6c-->
								<view
									style="box-sizing: border-box;background:blue;margin-right:10px;color:white;font-size:10px;padding:5px;border-radius: 10%;"
									:style="{'background': item.refundStatus===0?'#e45cf4':item.refundStatus===1?'#e6a23c':item.refundStatus===2?'#67c23a':item.refundStatus===3?'#f56c6c':'red'}">
									{{ statusDic[item.refundStatus] }}</view>
								{{ item.type == 1 ? "+" : "-" }}{{ item.rattan }}
							</view>
						</view>
					</c-scroll-list>
				</view>
			</uni-popup>
		</view>

	</view>

</template>

<script>
	import {
		teamIntegralStatistics,
		teamIntegralList,
		teamMembersList
	} from "@/api/user.js";
	export default {
		data() {
			return {
				popupShow: false,
				pageType: 0,
				statistics: {
					freeze: 0,
					totalIntegral: 0,
					treatWithdrawn: 0,
					withdrawn: 0,
				},
				integralList: [],	// 提现明细列表
				memberList: [],	// 成员列表
				flowIncomeList: [],	// 流水收益列表
				page: {
					pageNum: 1,
					pageSize: 10
				},
				statusDic: {
					0: '冻结',
					1: '提现中',
					2: '成功',
					3: '审核失败',
					4: '退款'
				},
				api: this.$api.partIncomeList,
				apiParams: {
					//这是接口参数
					contributor: 1,
					// userId:uni.getStorageSync('user').userId
				},
			};
		},
		watch: {
			pageType: {
				handler(newval) {
					this.page.pageNum = 1
					this.getData()
				},
			},
		},
		methods: {
			getTeamIntegralList() {
				teamIntegralList(this.page).then(res => {
					this.integralList.push(...res.list);
				})
			},
			getTeamMembersList() {
				teamMembersList(this.page).then(res => {
					this.memberList.push(...res.list);
				})
			},
			goWithdrawal() {
				uni.navigateTo({
					url: '/pages/my/pages/withdrawal'
				})
			},
			shareToggle(id) {
				this.apiParams.contributor = id
				this.$refs.popupRef.open()
				this.$refs.list.initList()
			},
			closePopup() {
				this.$refs.popupRef.close()
			},
			changePage(index) {
				this.pageType = index
			},
			onShow() {
				this.getData()
			},
			async getData() {
				this.integralList = []
				this.memberList = []
				teamIntegralStatistics().then(res => {
					this.statistics = res;
				})
				if (this.pageType == 0) {
					this.getTeamIntegralList()
				} else {
					this.getTeamMembersList()
				}
			},
			load(res) {
				this.flowIncomeList = res.list;
			},
			getPageData() {
				this.page.pageNum++
				this.getTeamIntegralList()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 100vh;
		background-color: #f0f0f0;
		letter-spacing: 1px;
	}

	.header {
		background-color: #4ca7ff;
		color: white;
		text-align: center;
		padding: 20px;
		width: 100%;
		padding-top: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.header-top {
		width: 80%;
		text-align: left;
		z-index: 10;
	}

	.header-bottom {
		width: 80%;
		height: 120rpx;
		background: #93caff;
		border: 1px solid white;
		border-radius: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 30rpx;
		z-index: 10;
	}

	.header-tag {
		display: inline-block;
		font-size: 14px;
		color: white;
		box-sizing: border-box;
		border-radius: 5px;
		padding: 10px;
		display: flex;
		align-items: flex-end;
	}

	.header-tag p {
		background: orange;
		padding: 3px;
		box-sizing: border-box;
		border-radius: 5px;
	}

	.header h1 {
		font-size: 18px;
		margin: 0;
	}

	.header p {
		font-size: 14px;
		margin: 10px 0 0;
	}

	.header .points {
		font-size: 48px;
		font-weight: 500;
		margin: 1px 0;
		display: flex;
		margin-top: 5px;
	}

	.header .withdraw-button {
		background-color: #ffc107;
		color: black;
		border: none;
		padding: 10px 20px;
		font-size: 16px;
		cursor: pointer;
		border-radius: 5px;
	}

	.details-header {
		width: 100%;
		height: 80rpx;
		background: white;
		margin-bottom: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 18px;
	}

	.summary {
		display: flex;
		justify-content: space-around;
		width: 100%;
		background-color: white;
		padding: 20px 0;
		margin-top: 10px;
	}

	.summary-item {
		text-align: center;
	}

	.summary-value {
		font-size: 24px;
		margin: 0;
	}

	.summary-label {
		font-size: 14px;
		margin: 5px 0 0;
	}

	.details {
		background-color: white;
		width: 100%;
		padding: 0 20px 20px 20px;
		box-sizing: border-box;
	}

	.details h2 {
		font-size: 20px;
		margin: 0 0 20px;
	}

	.detail-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 0;
		border-bottom: 1px solid #ddd;
	}

	.detail-name {
		font-size: 16px;
		margin: 0;
		overflow: hidden;
	}

	.detail-date {
		font-size: 12px;
		color: #888;
	}

	.detail-points {
		display: flex;
		align-items: center;
		font-size: 20px;
	}

	.tag {
		height: 100%;
		font-size: 10px;
		display: inline-block;
		background: red;
		padding: 3px;
		box-sizing: border-box;
		border-radius: 3px;
		color: white;
		margin-right: 5px;
	}

	.popup-container {
		background: #f0f0f0;
	}

	.popup-header {
		width: 100%;
		height: 50rpx;
		padding: 10rpx;
		text-align: center;
		display: relative;
	}

	.popup-header-close {
		position: absolute;
		top: 7px;
		right: 20px;
	}

	.rattan_record {
		padding: 20rpx 0rpx;
		margin: 0rpx 32rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #dcdfe2;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.rattan_l {
			p {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			span {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}

		.rattan_r1 {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #2ad03d;
			display: flex;
		}

		.rattan_r2 {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #666666;
		}
	}

	.tagAB {
		font-size: 10px;
		display: inline-block;
		background: red;
		padding: 3px;
		box-sizing: border-box;
		border-radius: 3px;
		color: white;
		margin-right: 5px;
	}


	.view_fengexian {
		width: 100%;
		height: 1rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background: #c8c8c8;
	}

</style>